<template>
  <div>
    <input type="text" v-model="msg">
    <p>{{msg}}</p>
  </div>
</template>

<script>
export default {
  name: 'Watch',
  data () {
    return {
      msg: ''
    }
  },
  watch: {
    msg (newMsg, oldMsg) {
      console.log(newMsg, oldMsg)
    }
  },
  /* 生命周期函数(声明周期钩子) */
  beforeCreate () {
    console.log('beforeCreate')
  },
  created () {
    /*
    * this.$router是整个Vue应用的路由集合
    * this.$route是当前的路由对象，包括了地址和携带的参数等内容
    *  */
    console.log(this.$router)
    console.log(this.$route)
    console.log(this.$route.query.name)
    /* Vue实例(组件)创建完成后自动执行 */
    /* created执行时监听器(watch)、data属性，methods方法可用，但是Vue原型上的内容不可用 */
    console.log('created')
  },
  beforeMount () {
    /* 实例挂载前 */
    console.log('beforeMount')
  },
  mounted () {
    /* 实例挂载完成，mounted不能保证子组件也同步完成，如果希望某些操作必须在整个视图全部渲染完毕后再执行，那么可以在created或者mounted方法内调用this.$nextTick()函数 */
    console.log('mounted')
    /*

    箭头函数，可以用来改善this的指向问题
    * () => {

    }
    *
    在默认的JS环境中，this的指向默认是window对象
    在当前这个Vue项目中，this的指向默认是当前的vue(组件)实例

    this的指向在函数调用时会发生改变（谁调用方法，this就是谁）
    *  */
    console.log(this)
    this.$nextTick(() => {
      console.log(this)
    })
  },
  beforeUpdate () {
    /* data中的值发生变化,但是还未渲染到页面中 */

    console.log('beforeUpdate')
    console.log('当前data中的值：', this.msg)
    console.log('当前页面中的值：', document.querySelector('p').innerText)
  },
  updated () {
    /* data中的值发生变化，渲染到页面完成 */
    console.log('updated')
    console.log('当前data中的值：', this.msg)
    console.log('当前页面中的值：', document.querySelector('p').innerText)
  },
  beforeDestroy () {
    console.log('beforeDestroy')
  },
  destroyed () {
    console.log('destroyed')
  }
}
</script>

<style scoped>

</style>
